{extend name="public/base"/} {block name="body"}
<style>
    .mui-row.mui-fullscreen>[class*="mui-col-"] {
        height: 100%;
    }

    .mui-col-xs-3,
    .mui-col-xs-9 {
        overflow-y: auto;
        height: 100%;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    .mui-control-content {
        display: block;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
    .mui-toast-container {
        bottom: 50%;
        z-index: 999999999999999999;
    }
    .mui-btn-block{
      padding: 5px;
      border: 1px solid #ccc !important;
      margin: 5px;
      -webkit-appearance: none;
    }
    .active .mui-icon{
      display: block !important;
    }
    .paylist.open{
          overflow-y: scroll;
    }

    .info-box{
      background-color: #3190e8;
      padding: .4rem .4rem;
      color:#fff;
    }
    .info-box .headimg {
      padding: 0.5rem 0;
    }
    .info-box .headimg img{

      font-size: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
      border-radius: 50%;
      height: 1.6rem;
      background: #fff;
      display: inline-block;
      vertical-align: middle;

    }
    .balance{
          color: #f90;
    }
    .hongbao{
          color: #ff5f3e;
    }
    .score{
            color: #6ac20b;
    }
    .mui-row {
      background-color: #fff;
    }
    .mui-row .mui-col-xs-6{
      padding: .453333rem 0 .293333rem;
      font-size: .32rem;
      line-height: .32rem;
      border-right: 1px solid #ddd;
    }

    .mui-row .mui-col-xs-6 span{
       font-size: .693333rem;
       line-height: .693333rem;
       font-weight: 700;
    }

    .mui-input-group .mui-input-row{
      height: auto;
    }
</style>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
<header class="mui-bar mui-bar-nav" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">付款</h1>
</header>
<div class="mui-content" style="    margin-bottom:60px;">


  <section class="cart-address" >
      <div class="address-item"   onclick="window.location.href ='{:url('index/address/index')}?backurl={:url('index/custompayment/index')}' "  {empty name="$address['sex']"}style="display: none;"{/empty}>
          <h2 class="address-name" > <b >{$address.name}</b> <span >{eq name="$address['sex']" value='1'}先生{else /}女士{/eq}</span> <span >{$address.tel}</span> </h2>
          <p class="address-detail" >{$address.address}</p> <span class="mui-icon mui-icon-arrowright"></span>  </div>
      <div class="address-item" onclick='window.location.href = "{:url('index/address/add')}"' {notempty name="$address['sex']"}style="display: none;"{/notempty} > 请添加一个收货地址 <span class="mui-icon mui-icon-arrowright"></span> </div>
  </section>

  <div class="mui-card" style="padding:10px;">
    <form class="mui-input-group" method="post"  action="{:url('index/order/custompay')}">
    					<div class="mui-input-row">
    						<label>备注:</label>
    		
                <textarea name="title" rows="8" cols="80" readonly>{$custom_title}</textarea>
    					</div>
    					<div class="mui-input-row">
    						<label>金额</label>
                		<input type="number" name="total"  value="{$custom_price}" readonly>
    					</div>

              <div class="cart-item fee" id="payment" style="border-top:none;padding-left:0;">
                <span style="font-size:14px;    color: #000;">优惠券 <span id="cnum"></span></span>
                <span class="cartitem-right">
                  <i id="paywaytext" style="    font-style: normal;">

                  </i>
                  <input type="hidden" name="coupon_id" >
                  <span class="mui-icon mui-icon-arrowright"></span>
                </span>
              </div>

              <aside class="paylist ">
                  <header class="paylist-header">支付方式</header>

              </aside>
              <div class="mask "></div>

              <div class="mui-input-row">
    						<label>可用余额</label>
                		<div style="line-height: 40px;">{$Think.session.user.balance}元</div>
    					</div>
              <div class="mui-input-row">
    						<label>待支付</label>
                		<div style="line-height: 40px;"><span class="price">0</span> 元</div>
    					</div>

              <section class="checkout-section">
                <div class="cart-item fee" id="pstime" style="    margin: 0;" >
                  <span>配送时间</span>
                   <span class="cartitem-right" id="pssj">
                     <i style="    font-style: normal;">
                       {empty name="Think.cookie.deliverytime"}
                         {eq name='Think.cookie.shopindex' value="index/index/mailindex"}
                            明日发货
                         {else/}
                           请选择配送时间
                         {/eq}
                       {else /}
                         {$Think.cookie.deliverytime|setDeliverytimeText2}
                       {/empty}
                     </i>

                     {eq name='Think.cookie.shopindex' value="index/index/mailindex"}
                        <input type="hidden" name="deliverytime"  value='明日发货'  />
                     {else/}
                       <input type="hidden" name="deliverytime"  value="{$Think.cookie.deliverytime|setDeliverytimeText}"  />
                     {/eq}
                     <span class="mui-icon mui-icon-arrowright"></span>
                   </span>
                </div>
              </section>

              <div>

              						<button type="button" class="mui-btn mui-btn-primary sbt" onclick="return false;" style="width:100%;margin-top:20px;">确认</button>&nbsp;&nbsp;

              					</div>
    				</form>
  </div>
  <ul class="mui-table-view">

      <li class="mui-table-view-cell">
          <a class="mui-navigate-right" href="{:url('index/coupon/integral')}">
    						我的积分中心
    					</a>
      </li>

  </ul>

</div>
{include file="public/nav" /}
<script id="zt" type="text/html">
    {{each  as value i}}
      <div class="paylist-item " data-couponid='{{value.id}}' data-total="{{value.total}}" data-price="{{value.price}}"><span> 满{{value.total}}元减{{value.price}}  </span> <span class="mui-icon mui-icon-checkmarkempty" style="color:#007aff;border: 1px solid;display:none"></span></div>

    {{/each}}
</script>

<script id="tpl2" type="text/html">
      <div class="select-time-box">
        <style>.wd50{width:50%!important;}</style>
        {literal}
        {{if date1}}

          <dl class="wd50"  id="jtdd"> <dt>{{date1}}<span>{{name1}}</span></dt>
              {{each list as value i}}
                <dd class="allow"   data-start="{{value.start_time}}"  data-text="{{date1}}{{value.start_time}}-{{value.end_time}}送达" data-val="{{date1}},{{value.start_time}}-{{value.end_time}}">
                   <label for="radio-choice-0">{{value.start_time}}-{{value.end_time}}</label> </dd>
              {{/each}}
          </dl>
          {{else}}
            <style>.wd50{width:100%!important;}</style>
          {{/if}}
         {/literal}

{literal}
          <dl  class="wd50"> <dt>{{date2}}<span>{{name2}}</span></dt>
             {{if type2==2}}

            <dd class="allow" data-text="{{date2}}10:00-13:00送达" data-val="{{date2}},10:00-13:00">
                  <label for="radio-choice-0">10:30-13:00</label> </dd>
                  {{/if}}
              {{each list as value i}}
                <dd class="allow" data-text="{{date2}}{{value.start_time}}-{{value.end_time}}送达" data-val="{{date2}},{{value.start_time}}-{{value.end_time}}">
                  <label for="radio-choice-0">{{value.start_time}}-{{value.end_time}} </label> </dd>
              {{/each}}
          </dl>
          {/literal}
      </div>
</script>

<div class="select-time-mask" onclick="hideDeliveryTime()" style="display: none;"></div>
<div class="select-time-wrap" id="select-model-01" style="display: none;"></div>
{/block}
{block name="script"}
<script type="text/javascript">
  $(function(){
    $("input[name='total']").keyup(function(){
      var val = $(this).val()
      $('.price').text(val)
      $('[name="coupon_id"]').val(0)
      $('#paywaytext').text(' ')
    })
    $("input[name='total']").keyup();
    $.post("{:url('index/coupon/getcouponlist')}", function(data) {
       var html = template('zt', data);
       $('.paylist').html(html);


      $('#cnum').text('('+data.length+'张)')

      $('.paylist-item').on('tap', function(){
        var val = $(this).text(),couponid = $(this).attr('data-couponid'),
                  price =  $(this).attr('data-price'),total =  $(this).attr('data-total'),
                  shop_price = $("input[name='total']").val()
        //判断是否满足优惠券条件

        if((shop_price-total)>=0){
          $('#paywaytext').text(val)
          $('.paylist').next().removeClass('open')
          $('.paylist').removeClass('open')
          $(this).addClass('active').siblings().removeClass('active')
          $('.price').text(shop_price-price)
          $('[name="coupon_id"]').val(couponid)
        }else{
          mui.toast('未满足条件')
        }

      })


    }, "json");



    $('#payment').on('tap', function(){
        $('.paylist').addClass('open');
        $('.paylist').next().addClass('open');
    })
    $('.mask').on('tap', function(){
      $(this).removeClass('open')
      $('.paylist').removeClass('open')
    })



    //确定付款
    $('.sbt').on('tap', function(){
      var total = $.trim($('[name="total"]').val()),deliverytime = $.trim($('[name="deliverytime"]').val())
      if(!total){
        mui.toast('请输入金额！')
        return;
      }
      if(!deliverytime){
        mui.toast('请选择配送时间！')
        return;
      }
      var btnArray = ['否', '是'];
      mui.confirm('您确定要消费吗？', '消费', btnArray, function(e) {
        if (e.index == 1) {
        $('form').submit()
        } else {
          return ;
        }
      })

    })



    //配送时间
    $('#pstime').on('tap', function(){
              $(".select-time-mask").show(), $(".select-time-wrap").show();

    })
      showDeliveryTime()
    function showDeliveryTime() {
        var data = {}
            data.jt = new Date(),
            data.jm = data.jt.getMonth()+1,
            data.jd = data.jt.getDate();
            data.rq = data.jm+'-'+data.jd;

        $.post("{:url('index/index/getDeliveryTime')}", function(da) {
            if(da){
              data.list = da;

                 data.name1 = ''

                data.date1 = ''

            }
              var html = template('tpl2', data);
              $('.select-time-wrap').html(html);



        }, "json");

    }
    $(document).on('tap', '.select-time-box dd.allow',function(){
      var $this = $(this),text = $this.attr('data-text'),val = $this.attr('data-val')
        $('#pssj i').text(text)
        $('#pssj input').val(val)
        $(".select-time-wrap").hide(), $(".select-time-mask").hide()

        $.getJSON("{:url('index/cart/changecookie')}", {name: 'deliverytime', 'val': val}, function(json, textStatus) {
       });
    })
    function hideDeliveryTime() {
        $(".select-time-mask").hide(), $(".select-time-wrap").hide()
    }

  })
</script>
{/block}
